import {Link, useNavigate} from "react-router-dom";
import {LOGIN_PATHNAME} from "../router";
import {UserOutlined} from "@ant-design/icons";
import {Button, message} from "antd";
import useGetUserInfo from "../hooks/useGetUserInfo";
import {useDispatch} from "react-redux";
import {logoutReducer} from "../store/userReducer";

export const UserInfo = () => {
    // const {data} = useRequest(getUserInfoService)
    // const {username, nickname} = data || {}

    const nav = useNavigate()

    const {username, nickname} = useGetUserInfo()

    const dispatch = useDispatch()

    function logout() {
        // removeToken()
        dispatch(logoutReducer())
        message.success('退出成功').then(() => {
        })
        nav(LOGIN_PATHNAME)
    }

    const UserInfo = (
        <>
        <span style={{color: '#e8e8e8'}}>
            <UserOutlined/>
            {nickname}
        </span>
            <Button type={'link'} onClick={logout}>退出</Button>
        </>
    )

    const Login = <Link to={LOGIN_PATHNAME}>登录</Link>
    return (
        <>
            {username ? UserInfo : Login}
        </>
    );
};